<template>
  <div id="app">
    <el-row>
      <el-col :span="24">
        <div
          class="width_96 padding_15 border_bottom display_flex align_items_center"
        >
          <el-page-header
            class="flex_1"
            @back="goBack"
            title=""
            content="成员详情"
          ></el-page-header>
          <div>
            <el-button
              class="button_span"
              type="primary"
              plain
              @click="particulars"
              >编辑</el-button
            >

            <el-button type="primary" plain @click="equipment"
              >绑定设备</el-button
            >
            <el-button type="primary" plain @click="del_reset(2)"
              >重置密码</el-button
            >
            <el-button type="primary" plain @click="del_reset(3)"
              >禁用</el-button
            >
            <el-button type="danger" plain @click="del_reset(1)"
              >删除</el-button
            >
          </div>
        </div>
        <el-form
          :rules="rules"
          :model="form"
          ref="form"
          class="width_96 demo-ruleForm"
          label-width="130px"
          disabled
        >
          <el-row>
            <el-col :span="12">
              <el-row class="width_100">
                <el-col :span="20">
                  <el-form-item label="员工昵称：" prop="name">
                    <el-input
                      placeholder="请输入员工昵称"
                      v-model="form.name"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="真实姓名：" prop="name">
                    <el-input
                      placeholder="请输入真实姓名"
                      v-model="form.name"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="20">
                  <el-form-item label="选择性别： " prop="name">
                    <el-radio v-model="form.gender" label="1">男</el-radio>
                    <el-radio v-model="form.gender" label="2">女</el-radio>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12" class="text_align_center margin_top_10">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <img
                  v-else
                  src="../../assets/images/organization/pic_4.png"
                  class="avatar"
                  alt=""
                />
              </el-upload>
              <span class="font_size_12 color_A3A3A3"
                >请上传jpg/png格式图片图片大小不超过2M</span
              >
            </el-col>
          </el-row>

          <div class="xx"></div>
          <el-row>
            <el-col :span="10">
              <el-form-item label="成员手机：" prop="name">
                <el-input
                  placeholder="请输入成员手机"
                  v-model="form.phone"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="设置密码：" prop="name">
                <el-input
                  placeholder="请设置密码"
                  v-model="form.pwa"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="员工工号：" prop="name">
                <el-input
                  placeholder="请输入员工工号"
                  v-model="form.pwa"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="归属部门：" prop="name">
                <el-cascader
                  style="width: 100%"
                  :options="options"
                  :props="{ multiple: true }"
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="员工职位：" prop="name">
                <el-button type="text">去设置</el-button>
                <el-select
                  v-if="false"
                  style="width: 100%"
                  v-model="form.position"
                  placeholder="请选择"
                >
                  <el-option label="收银" value="1"> </el-option>
                  <el-option label="迎宾" value="1"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="部门负责人：" prop="name">
                <el-radio v-model="form.principal" label="1">是</el-radio>
                <el-radio v-model="form.principal" label="2">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="xx"></div>
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    style="margin-bottom: 10px"
                    label="收银票据："
                    prop="name"
                  >
                    <el-switch
                      v-model="form.note"
                      active-value="1"
                      inactive-value="2"
                    >
                    </el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="收银系统名称：">
                    <el-input
                      placeholder="请输入收银系统名称"
                      v-model="form.bank_name"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="20">
                  <el-form-item label="收银系统账号：">
                    <el-input
                      placeholder="请输入收银系统账号"
                      v-model="form.System_account"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <div class="width_90 text_align_center">
                <img
                  style="width: 276px; height: 276px"
                  src="../../assets/images/menu/xiangqing.png"
                  class="width_90 margin_top_20"
                  alt=""
                />
              </div>
            </el-col>
            <el-row> </el-row>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <!-- 绑定设备列表 -->
    <el-dialog title="设备绑定" :visible.sync="equipmentVisible" width="80%">
      <el-table
        :header-cell-style="{ background: '#E6EFFF' }"
        :data="list"
        class="margin_top_10"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="date" label="设备SN编号"></el-table-column>
        <el-table-column prop="date" label="设备型号"></el-table-column>
        <el-table-column prop="date" label="设备用途"></el-table-column>
        <el-table-column prop="date" label="查看照片">
          <template slot-scope="scope"
            ><el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            ></template
          >
        </el-table-column>
        <el-table-column prop="store" label="状态">
          <template slot-scope="scope">
            {{ scope.row.store == 1 ? '已绑定' : '未绑定' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.store == 2"
              type="text"
              size="small"
              @click="relevancy(1)"
              >绑定</el-button
            >
            <el-button
              v-if="scope.row.index == 1"
              type="text"
              size="small"
              @click="relevancy(2)"
              >解绑</el-button
            >
            <el-button
              v-if="scope.row.index == 2"
              type="text"
              size="small"
              @click="relevancy(3)"
              >设备联动</el-button
            >
            <el-button
              v-if="scope.row.index == 1"
              type="text"
              size="small"
              @click="relevancy(4)"
              >解除联动</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="equipmentVisible = false">取 消</el-button>
        <el-button type="primary" @click="equipmentVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 设备绑定 -->
    <el-dialog
      :title="title"
      :visible.sync="equipmentVisible1"
      width="30%"
      center
      @close="resetForm"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="设备类型：" prop="sty">
          <el-input disabled style="100px" v-model="ruleForm.sty"></el-input>
        </el-form-item>
        <el-form-item label="设备型号：" prop="model">
          <el-input disabled style="100px" v-model="ruleForm.model"></el-input>
        </el-form-item>
        <el-form-item
          v-if="title == '设备绑定'"
          label="设备SN码："
          prop="sn_data"
        >
          <el-input
            style="100px"
            placeholder="请输入设备sn编号"
            v-model="ruleForm.sn_data"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="title == '解绑联动' || title == '设备联动'"
          label="云喇叭："
          prop="trumpet"
        >
          <el-select v-model="ruleForm.trumpet" placeholder="请选择">
            <el-option label="云喇叭" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="title == '解绑联动'">
          <div style="font-size: 12px; color: #ff3131">
            解除联动后收单设备收款成功后将不在云喇叭设备上同步播放
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button
          v-if="title == '解绑联动'"
          type="primary"
          @click="SubmitForm(1)"
          >确 定</el-button
        >
        <el-button
          v-if="title == '设备联动'"
          type="primary"
          @click="SubmitForm(2)"
          >确 定</el-button
        >
        <el-button
          v-if="title == '设备绑定'"
          type="primary"
          @click="SubmitForm(3)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="box_height"></div>
  </div>
</template>

<script>
import {
  get,
  post,
  formatterCellval,
  pickerOptions,
  tipsFun
} from '../../util/request.js'
import { icon_1 } from '../../util/icon.js'
export default {
  name: '',
  data () {
    var treeData = [
      {
        id: 1,
        label: '一级 1',
        children: [
          {
            id: 4,
            label: '二级 1-1',
            children: [
              {
                id: 9,
                label: '三级 1-1-1'
              },
              {
                id: 10,
                label: '三级 1-1-2'
              }
            ]
          }
        ]
      },
      {
        id: 1,
        label: '一级 1',
        children: [
          {
            id: 4,
            label: '二级 1-1',
            children: [
              {
                id: 9,
                label: '三级 1-1-1'
              },
              {
                id: 10,
                label: '三级 1-1-2'
              }
            ]
          }
        ]
      },
      {
        id: 1,
        label: '一级 1',
        children: [
          {
            id: 4,
            label: '二级 1-1',
            children: [
              {
                id: 9,
                label: '三级 1-1-1'
              },
              {
                id: 10,
                label: '三级 1-1-2'
              }
            ]
          }
        ]
      }
    ]
    const generateData = _ => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0,
          data: {
            key: i,
            label: `备选项 ${i}`,
            disabled: i % 4 === 0
          }
        })
      }
      return data
    }
    return {
      title: '',
      options: [
        {
          value: 1,
          label: '东南',
          children: [
            {
              value: 2,
              label: '上海',
              children: [
                { value: 3, label: '普陀' },
                { value: 4, label: '黄埔' },
                { value: 5, label: '徐汇' }
              ]
            }
          ]
        }
      ],
      list: [
        {
          name: '张三',
          date: '2023-10-26',
          address: '山东省济南市历下区泉城路',
          num: 12,
          store: '1',
          index: '1'
        },
        {
          name: '张三',
          date: '2023-10-26',
          address: '山东省济南市历下区泉城路',
          num: 12,
          store: '1',
          index: '1'
        },
        {
          name: '张三',
          date: '2023-10-26',
          address: '山东省济南市历下区泉城路',
          num: 12,
          store: '2'
        },
        {
          name: '张三',
          date: '2023-10-26',
          address: '山东省济南市历下区泉城路',
          num: 12,
          store: '1',
          index: '2'
        },
        {
          name: '张三',
          date: '2023-10-26',
          address: '山东省济南市历下区泉城路',
          num: 12,
          store: '1',
          index: '1'
        },
        {
          name: '张三',
          date: '2023-10-26',
          address: '山东省济南市历下区泉城路',
          num: 12,
          store: '2'
        },
        {
          name: '张三',
          date: '2023-10-26',
          address: '山东省济南市历下区泉城路',
          num: 12,
          store: '1',
          index: '1'
        },
        {
          name: '张三',
          date: '2023-10-26',
          address: '山东省济南市历下区泉城路',
          num: 12,
          store: '2'
        }
      ],
      icon_1: icon_1,
      treeData: JSON.parse(JSON.stringify(treeData)),
      //绑定设备
      rules: {
        sty: [{ required: true, message: '请输入设备类型', trigger: 'blur' }],
        model: [{ required: true, message: '请输入设备型号', trigger: 'blur' }],
        sn_data: [
          {
            required: true,
            message: '请输入设备sn编码',
            trigger: 'blur'
          }
        ],
        trumpet: [
          { required: true, message: '请选择联动设备', trigger: 'blur' }
        ]
      },
      ruleForm: {
        sty: '111',
        model: '111',
        trumpet: ''
      },
      form: {},
      // 绑定设备
      submitForm: {},
      sub_title: '',
      dialogVisible: false,
      value: '',
      data: generateData(),
      generateValue: [1, 4],
      imageUrl:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      SetDepartment: [],
      drawer_status: false,
      equipmentVisible: false,
      equipmentVisible1: false
    }
  },
  methods: {
    // 确认绑定
    SubmitForm (val) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(111)
          this.equipmentVisible1 = false
        }
      })
    },
    del_reset (value) {
      if (value == 1) {
        this.$confirm('确定删除所选组织层级？', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'error',
          center: true
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(() => {
            this.$message({
              message: '删除已取消'
            })
          })
      } else if (value == 2) {
        this.$confirm('该成员密码会被重置为手机号后六位', '提示', {
          confirmButtonText: '确定重置',
          cancelButtonText: '取消',
          type: 'error',
          center: true
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '重置成功!'
            })
          })
          .catch(() => {
            this.$message({
              message: '重置已取消'
            })
          })
      } else {
        this.$confirm('禁用后，该员工无法登录乐易呗平台', '提示', {
          confirmButtonText: '确定禁用',
          cancelButtonText: '取消',
          type: 'error',
          center: true
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '禁用成功!'
            })
          })
          .catch(() => {
            this.$message({
              message: '禁用已取消'
            })
          })
      }
    },
    // 重置设备添加的表单
    resetForm () {
      this.$refs.ruleForm.resetFields()
      this.equipmentVisible1 = false
    },
    goBack () {},
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 查看设备照片
    handleClick () {},
    // 绑定设备、联动
    relevancy (val) {
      if (val == 1) {
        this.equipmentVisible1 = true
        this.title = '设备绑定'
      } else if (val == 2) {
        this.$confirm('解绑后，本商户将无法使用该设备', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error',
          center: true
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '解绑成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消解绑'
            })
          })
      } else if (val == 3) {
        console.log(111)
        this.title = '设备联动'
        this.equipmentVisible1 = true
      } else {
        console.log(222)
        this.title = '解绑联动'
        this.equipmentVisible1 = true
      }
    },
    // 绑定设备
    equipment () {
      this.equipmentVisible = true
    },

    // 点击编辑和详情
    particulars (val) {
      console.log('点击详情')
      this.$router.push({
        name: 'StoreDetail',
        params: {
          id: 11,
          parameter: '编辑成员'
        }
      })
    },
    add () {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel () {
      this.$refs.form.resetFields()
      this.$router.go(-1)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    sz_generate_FUN () {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped="true">
.button_span {
  width: 103px;
  height: 37px;
  background: #3f75ff;
  color: #fff;
  border-radius: 4px 4px 4px 4px;
}
.button_ {
  display: flex;
  justify-content: center;
  justify-content: space-evenly;
}
.tree_list >>> .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.tree_list >>> .el-tree-node__content:hover {
  background-color: #ecf2fe !important;
}

.list >>> .font_size_26 {
  font-size: 22px;
}

.list >>> .tab_title {
  font-size: 12px;
  color: #0067d9;
}

.list >>> .tab_title div {
  margin-right: 10px;
}

.small_box >>> .list {
  padding: 10px 0;
}

.box {
  padding: 10px;
  border-radius: 6px;
  background-color: rgba(236, 242, 254, 1);
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px !important;
  margin-top: 10px !important;
}

.el-form-item__content {
  margin-left: 0px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 98px;
  height: 98px;
  line-height: 98px;
  text-align: center;
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
}

.avatar {
  width: 98px;
  height: 98px;
  display: block;
}

.select_bm {
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid #f5f5f5;
  color: #575757;
  margin-right: 10px;
  background: #ddedff;
}

.select_bm i {
  color: #d9d9d9;
}

.e_box_left {
  border-right: 1px solid #e1e1e1;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  height: 400px;
}

.e_box_right {
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  height: 400px;
}

.ee_box >>> .el-dialog__body {
  padding: 0 !important;
}

.tree_icon {
  width: 14px;
  height: 14px;
}

.icon_2 {
  font-size: 16px;
}

.background_DDEDFF {
  background: #ddedff;
  margin-top: 10px;
  border-radius: 8px;
}
</style>
